<template>
  <div class="app-container">
    <el-form
      ref="form"
      :inline="true"
      :model="formData"
      class="demo-form-inline"
    >
      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.orderId"
          placeholder="订单号"
        />
      </el-form-item>

      <el-form-item>
        <el-input
          style="width: 250px"
          v-model="formData.dyOrderId"
          placeholder="抖音订单号"
        />
      </el-form-item>

      <el-form-item>
        <el-date-picker
          v-model="formData.dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="创建开始日期"
          end-placeholder="创建结束日期"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-select
          clearable
          v-model="formData.status"
          placeholder="请选择退款状态"
        >
          <el-option
            v-for="item in shopStatusList"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
         <el-button type="danger" @click="clickRefundOrder">发起主动退款</el-button>
        <el-button type="warning" @click="clickCheckRefund">退款校验</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" style="width: 100%">
      <el-table-column prop="orderId" label="订单ID"> </el-table-column>
      <el-table-column prop="dyOrderId" label="抖音订单ID"> </el-table-column>
      <el-table-column prop="outOrderNo" label="outOrderNo"> </el-table-column>
      <el-table-column prop="openId" label="openID" width="300">
      </el-table-column>
      <el-table-column prop="errorCode" label="退款CODE"> </el-table-column>
      <el-table-column prop="errorCode" label="退款金额">
        <template slot-scope="scope">
          <span>{{ scope.row.jsonText=='系统操作退款'? '系统退款':getTotalAmount(scope.row).toFixed(2)+'（元）' }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="errorCode" label="退款状态">
        <template slot-scope="scope">
          <span>{{ refundStatus[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
    </el-table>


    <el-dialog
        title="提示"
        :visible.sync="dialogShowRefund"
         width="960px"
        :before-close="handleClose">
         <el-tag type="danger" style="font-size: 16px; font-weight: 700; margin-bottom: 20px;" >
             1.此接口仅作为抖音紧急退款使用，如果需要使用请与研发王显跃联系，如果私自使用产生的经济纠纷平台不负责！！！
           </el-tag>
            <el-tag type="danger" style="font-size: 16px; font-weight: 700; margin-bottom: 20px;" >
             2.此接口只是退款，不会更改订单状态和订单预约状态，这些状态需要用户在小程序取消订单主动触发
           </el-tag>
            <el-tag type="danger" style="font-size: 16px; font-weight: 700; margin-bottom: 20px;" >
             3.若接口调用失败，请联系研发排查问题
           </el-tag>

       <el-input placeholder="请输入订单编号" v-model="orderNo" />
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogShowRefund = false">取 消</el-button>
          <el-button type="primary" @click="submitSure">确 定</el-button>
        </span>
    </el-dialog>

    <el-dialog
      title="退款校验"
      :visible.sync="dialogShowCheckRefund"
      width="400px"
      @close="handleCloseCheckRefund"
    >
      <div>
        <el-input
          v-model="checkOrderNo"
          placeholder="请输入订单NO"
          clearable
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogShowCheckRefund = false">取 消</el-button>
        <el-button type="primary" @click="submitCheckRefund">确 定</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="queryParams.total > 0"
      :total="queryParams.total"
      :page.sync="queryParams.page"
      :limit.sync="queryParams.pageSize"
      @pagination="getListData"
    />
  </div>
</template>

<script>
import { getDouyinRefundList , offerRefund, checkRefundApi } from "@/api/order/index";
import { setStartOfDay, setEndOfDay } from "@/utils/tool";
export default {
  name: "Index",
  data() {
    return {
      dialogShowRefund:false,
      dialogShowCheckRefund:false,
      refundStatus: {
        0: "退款中",
        1: "退款成功",
        2: "退款失败",
      },
      orderNo:"",
      checkOrderNo:"",
      formData: {
        orderId: "",
        dyOrderId: "",
        dateRange: "",
        status: "",
      },
      queryParams: {
        page: 0,
        pageSize: 10,
        total: 0,
      },
      list: [],
    };
  },
  computed: {
    shopStatusList() {
      return [
        { label: "退款中", value: 0 },
        { label: "退款成功", value: 1 },
        { label: "退款失败", value: 2 },
      ];
    },
  },
  created() {
    this.getListData({
      page: 1,
      limit: 10,
    });
  },
  methods: {

    handleCloseCheckRefund(){
      this.dialogShowCheckRefund=false
    },

    handleClose(){
      this.dialogShowRefund=false
    },

    submitSure(){
    if(!this.orderNo){
      this.$message.error("订单号不能为空，请检查！")
       return
     }

     offerRefund({orderNo:this.orderNo}).then(res=>{
         this.$message.success("操作成功")
         this.dialogShowRefund=false
         this.getListData({page:1,limit:10})
     })

    },


    submitCheckRefund() {
      if (!this.checkOrderNo) {
        this.$message.error("订单NO不能为空，请检查！");
        return;
      }

      checkRefundApi(this.checkOrderNo)
        .then((res) => {
          this.$message.success(`退款校验结果: ${res.data}`);
          this.dialogShowCheckRefund = false;
        })
        .catch(() => {
          this.$message.error("退款校验失败，请稍后重试");
        });
    },

    getTotalAmount(row) {
      return JSON.parse(row.jsonText).refund_total_amount / 100;
    },

    clickRefundOrder(){
    //  console.info("发起主动退款")
     this.orderNo=""

     this.dialogShowRefund=true


    },

    clickCheckRefund(){
      // console.info("校验退款")
      this.checkOrderNo = ""
      this.dialogShowCheckRefund = true
    },

    getListData({ page, limit }) {
      getDouyinRefundList(
        {
          orderId: this.formData.orderId,
          dyOrderId: this.formData.dyOrderId,
          status: this.formData.status,
          startTime: this.queryParams.dateRange
            ? setStartOfDay(this.queryParams.dateRange[0])
            : "",
          endTime: this.queryParams.dateRange
            ? setEndOfDay(this.queryParams.dateRange[1])
            : "",
        },
        page || this.queryParams.page + 1,
        limit
      ).then(({ data }) => {
        this.list = data.records;
        this.queryParams.total = data.total;
        this.queryParams.page = data.current;
        this.queryParams.limit = data.size;
      });
    },

    onSearch() {
      this.queryParams = {
        ...this.queryParams,
        ...this.formData,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },

    reset() {
      this.formData = {
        orderId: "",
        dyOrderId: "",
        dateRange: "",
        status: "",
      };
      this.queryParams = {
        page: 0,
        pageSize: 10,
        total: 0,
      };
      this.getListData({
        page: 1,
        limit: 10,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.create {
  margin-bottom: 20px;
}
</style>
